import React, { useState, useEffect } from 'react';
import { FileExcelOutlined, SearchOutlined } from '@ant-design/icons';
import { Input, Button, Spin, Checkbox, Modal } from 'antd';
import { useHistory } from 'react-router-dom';
import { openNotification_util, fetchsync_util, useexcelauto, dealnullorundenfined, convertISODateTimeToYYYYMMDDHHMMSS, use_olreport_bybbbm } from '../util/util.js'
import Custom_table_hooks_config from '../newmes/custom_table_hooks_config.js'
var storage = window.localStorage;
import Sortable_new from '../newmes/sortable_new.js';
import Analyse_kcfx_phmx from './analyse_kcfx_phmx.js';
import { use_jskc_initcolmun, use_jskc_bbh_initcolmun, use_jskc_ck_initcolmun,use_jskc_ckAndbbh_initcolmun } from './use_report_config.js'
import { useLatest } from 'ahooks';
import logo from '../../../img/shipSRM/chlogo.png'
import useStore from '../../useStore.js'
import { clearCache,useDidCache,useDidRecover ,dropByCacheKey } from 'react-router-cache-route';

const Jskcmx = () => {
  const history = useHistory();
  const [jskcmxlb, setJSkcmxlb] = useState([])
  const [selectedRows, setselectedRows] = useState([])
  const [selectedRowKeys, setselectedRowKeys] = useState([])
  const { nowroute, setnowroute,collapsed,setcollapsed } = useStore();

  const [sfbbh, setSfbbh] = useState(true)
  const [sfck, setSfCk] = useState(true)
  const [isloading, setisloading] = useState(true)
  const [show_phmx, setshow_phmx] = useState(false)
  const [initSize, setinitSize] = useState() //table宽度大小
  const columnArrCkAndBbh= use_jskc_ckAndbbh_initcolmun()
  const columnArrCk= use_jskc_ck_initcolmun()
  const columnArrBbh = use_jskc_bbh_initcolmun()
  const columnArr = use_jskc_initcolmun()

  const [columnarr, setcolumnarr] = useState(columnArr)
  
  const queryList = async (sfbbh,sfck) => {
    if(sfbbh && sfck){
      let rtdata = await use_olreport_bybbbm('v_jskcb_bbhAndCk')
      rtdata.v_jskcb_bbhAndCk.forEach(element => {
        element.create_time = element.create_time == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.create_time)
        element.kcsl = element.kcsl == null ? '' : element.kcsl.toFixed(1)
      });
      setcolumnarr(columnArrCkAndBbh)
      setJSkcmxlb(dealnullorundenfined(rtdata.v_jskcb_bbhAndCk))
      setselectedRowKeys([])
      setselectedRows([])
      setisloading(false)
    } else if(sfbbh){
      let rtdata = await use_olreport_bybbbm('v_jskcb_bbh')
      rtdata.v_jskcb_bbh.forEach(element => {
        element.create_time = element.create_time == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.create_time)
        element.kcsl = element.kcsl == null ? '' : element.kcsl.toFixed(1)
      });
      setcolumnarr(columnArrBbh)
      setJSkcmxlb(dealnullorundenfined(rtdata.v_jskcb_bbh))
      setselectedRowKeys([])
      setselectedRows([])
      setisloading(false)
    } else if(sfck){
      let rtdata = await use_olreport_bybbbm('v_jskcb_ck')
      rtdata.v_jskcb_ck.forEach(element => {
        element.create_time = element.create_time == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.create_time)
        element.kcsl = element.kcsl == null ? '' : element.kcsl.toFixed(1)
      });
      setcolumnarr(columnArrCk)
      setJSkcmxlb(dealnullorundenfined(rtdata.v_jskcb_ck))
      setselectedRowKeys([])
      setselectedRows([])
      setisloading(false)
    } else {
      let rtdata = await use_olreport_bybbbm('v_jskcb')
      rtdata.v_jskcb.forEach(element => {
        element.create_time = element.create_time == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.create_time)
        element.kcsl = element.kcsl == null ? '' : element.kcsl.toFixed(1)
      });
      setcolumnarr(columnArr)
      setJSkcmxlb(dealnullorundenfined(rtdata.v_jskcb))
      setselectedRowKeys([])
      setselectedRows([])
      setisloading(false)
    }
  }

  useEffect(() => {
    if (storage['Pc_jskcmx']) {
      var result = JSON.parse(storage['Pc_jskcmx'])
      setcolumnarr(result)
    } else {
      setcolumnarr(columnarr)
    }
    storage['Pc_jskcmx_initsize'] ? setinitSize(storage['Pc_jskcmx_initsize']) : setinitSize(1)
    document.addEventListener('keydown', handleKeyDown);
    queryList(sfbbh,sfck)
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };

  }, [])

  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      queryList(sfbbh,sfck)
    }
  }

  const handleExprot = async () => {
    let filtercol = JSON.parse(JSON.stringify(columnarr)).filter(item => item.show == true)
    useexcelauto(selectedRows, filtercol, '即时库存明细列表')
  }

  //路由跳转
  const tonormal = (route) => {
    history.push({ pathname: route });
  }
  const handleselectfather = (selectedRows, selectedRowKeys) => {
    setselectedRows(selectedRows)
    setselectedRowKeys(selectedRowKeys)
  }

  return (
    <div style={{
          height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
      backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>
      <div style={styles.kshcontainer}>
        <div style={{
            width: "99%", height: "", backgroundColor: "white", overflowX: "scroll", margin: "0.5vw",
          paddingLeft: "1vw"
        }}>
      <Modal destroyOnClose={true} title="出入库明细" open={show_phmx}
        onCancel={() => { setshow_phmx(false) }} width="100vw" footer={null}>
        <Analyse_kcfx_phmx selectedRows={selectedRows} ifshow={show_phmx} sfbbh={sfbbh} sfck={sfck} />
      </Modal>
          <div style={styleobj.linestyleflex}>
            &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}
              onClick={() => { isloading ? openNotification_util("请等待数据查询完成再操作！") : 
              queryList(sfbbh,sfck)}}><ReloadOutlined />刷新</Button>
            &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}
              onClick={handleExprot}><FileExcelOutlined />导 出</Button>
            &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}
              onClick={()=>{selectedRows.length==0?openNotification_util("请至少选择一条数据"):setshow_phmx(true)}}><FileExcelOutlined />查询出入库明细</Button>
            &nbsp;&nbsp;&nbsp;  <Checkbox checked={sfbbh} onChange={(e) => { setSfbbh(e.target.checked); queryList(e.target.checked,sfck)}}> 版本号</Checkbox >
            &nbsp;&nbsp;&nbsp;  <Checkbox checked={sfck} onChange={(e) => { setSfCk(e.target.checked); queryList(sfbbh,e.target.checked)}}> 仓库</Checkbox >
            <Sortable_new tableColnum={columnarr} handleTableColomn={(data) => { setcolumnarr(data); }}
              storageName="Pc_jskcmx" style={{ position: 'absolute', right: '2vw', top: '0.5rem', fontSize: "1.5rem" }}
              initSize={initSize} handleInitSize={(data) => { setinitSize(data); storage['Pc_jskcmx_initsize'] = data; }}
            />
          </div>
          {isloading ?
            (<div style={{ width: "10%", height: "10%", position: "absolute", left: "50%", top: "49%", color: "#14d9cc" }}><Spin /></div>)
            :
            <div style={{ width: "100%", right: "0", left: "0", margin: "auto", overflowX: "scroll" }}>
              <Custom_table_hooks_config tabledata={jskcmxlb} tablecolnum={columnarr}
                sfdoubleclick="false" ifhiddencchangeselecttype="true"
                width={'98%'}
                scroll={{ y: 'calc(100vh - 280px)'}}
                selectedRows={selectedRows} selectedRowKeys={selectedRowKeys}
                handleselectson={(selectedRows, selectedRowKeys) => { handleselectfather(selectedRows, selectedRowKeys) }}
              />
            </div>
          }
        </div>
      </div>
    </div>
  )
}

export default Jskcmx

var styles = {
  maincontainer: {
    height: "100vh", 
    backgroundColor: `#F1F1F1`,
    backgroundSize: "100% 100%", 
    width: "100%", position: "absolute", left: "0", 
    color: "white", fontSize: "0.8rem"
  },
  topcontainer: {
    width: "100%", 
    height: "10vw", 
    backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", 
    paddingTop: "3vw",
    position: "relative", 
    fontSize: "0.89rem", 
    textIndent: "2rem", 
    fontWeight: "800", 
    color: "#a91f24", 
    borderRadius: "0 0 15px 15px"
  },
  butdcstyle: { 
    paddingLeft:"1.5vw",
    paddingRight:"1.5vw", height: "2vw", position: "absolute", right: "1%", 
    top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", borderRadius: "0 0 0.3vw 0.3vw" 
  },
  butmainstyle: { 
    paddingLeft:"1.5vw",
    paddingRight:"1.5vw", height: "2vw", position: "absolute", 
    right: "8%", top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", 
    borderRadius: "0 0 0.3vw 0.3vw" 
  },
  kshcontainer: {
    width: "100%", minHeight: "40vh", position: "absolute", top: "2vh", left: "0vw", backgroundColor: "#F1F1F1",
    color: "black"
  },
}
var styleobj = {
  linestyle: { 
    height: "1.8rem", fontSize: "0.7rem", 
    position: "relative", width: "100%", textIndent: "1rem" 
  },
  linestylesmall: { 
    height: "1.3rem", fontSize: "0.7rem", 
    position: "relative", width: "100%", textIndent: "1rem" 
  },
  linestyleflex: {
    height: "1.8rem", 
    fontSize: "0.6rem", position: "relative", width: "96%", marginLeft: "0.1%",
    display: "flex", justifyContent: "flex-start", alignItems: "center", marginBottom: "0.5rem"
  },
  linestyleflexitem: {
    height: "1.6rem", fontSize: "0.7rem", position: "relative", width: "23%", textIndent: "0.5rem",
    backgroundColor: "white", lineHeight: "1.6rem", 
    fontSize: "0.75rem", fontWeight: "500", textAlign: "center"
  },
  linestyleflexitemleft: { 
    backgroundColor: "#F0F0F0", 
    position: "absolute", width: "35%", left: "0" 
  },
  linestyleflexitemright: { 
    backgroundColor: "white", 
    position: "absolute", width: "64%", right: "0" 
  },
  lineleft: { 
    width: "100%", 
    height: "100%", 
    position: "absolute", left: "0%", textAlign: "left", lineHeight: "2rem", fontSize: "0.75rem", fontWeight: "700" 
  },
}